
import { Children, lazy, Suspense } from 'react'
import { useRoutes, RouteObject, LazyRouteFunction } from 'react-router-dom'
const Login = lazy(() => import('../views/Login')) //路由懒加载
const Index = lazy(() => import('../views/Index')) //路由懒加载
const UserInfo = lazy(() => import('../views/userinfo/Index')) //路由懒加载
const Demo = lazy(() => import('../views/Demo')) //路由懒加载
const ReduxCom = lazy(() => import('../views/ReduxCom')) //路由懒加载
const ReduxCom2 = lazy(() => import('../views/ReduxCom2')) //路由懒加载
const UseReducerDemo = lazy(() => import('../views/UseReducerDemo')) //路由懒加载
const UseMemoDemo = lazy(() => import('../views/UseMemoDemo')) //路由懒加载
const routes: RouteObject[] = [
    {
        path: '/login',
        element: <Suspense fallback={<div>loading...</div>}><Login /></Suspense>
    },
    {
        path: '/',
        element: <Suspense fallback={<div>loading...</div>}><Index /></Suspense>,
        children: [
            {
                path: '/userinfo',
                element: <Suspense fallback={<div>loading...</div>}><UserInfo /></Suspense>
            },
            {
                path: '/demo',
                element: <Suspense fallback={<div>loading...</div>}><Demo /></Suspense>
            },
            {
                path: '/redux',
                element: <Suspense fallback={<div>loading...</div>}><ReduxCom /></Suspense>
            },
            {
                path: '/redux2',
                element: <Suspense fallback={<div>loading...</div>}><ReduxCom2 /></Suspense>
            },
            {
                path: '/useReducer',
                element: <Suspense fallback={<div>loading...</div>}><UseReducerDemo /></Suspense>
            },
            {
                path: '/useMemo',
                element: <Suspense fallback={<div>loading...</div>}><UseMemoDemo /></Suspense>
            }

            
            
        ]


    },
]

export default () => {



    return useRoutes(routes);

}